<template>
    <ak-header data-display="true">
        <button type="button" class="left_0 w_25 pl_3 text_al_l text_12em" id="plug_menu"><i class="text_14em icon-im_fenlei"></i></button>
        <h1 class="text_al_c">瀑布流展示</h1>
    </ak-header>

    <article class="plug_refresh">
        <div class="plug_waterfall module mt_5 mb_5 dis_opa_0 animated fadeIn ani_delay_05s">
            <figure><img src="./img/tibet-3.jpg" /></figure>
            <figure><img src="./img/tibet-2.jpg" /></figure>
            <figure><img src="./img/tibet-1.jpg" /></figure>
            <figure><img src="./img/tibet-5.jpg" /></figure>
            <figure><img src="./img/tibet-4.jpg" /></figure>
            <figure><img src="./img/tibet-6.jpg" /></figure>
            <figure><img src="./img/tibet-3.jpg" /></figure>
            <figure><img src="./img/tibet-2.jpg" /></figure>
            <figure><img src="./img/tibet-1.jpg" /></figure>
            <figure><img src="./img/tibet-5.jpg" /></figure>
            <figure><img src="./img/tibet-4.jpg" /></figure>
            <figure><img src="./img/tibet-6.jpg" /></figure>
        </div>
    </article>

    <!----------Andrew_PopupWin Start---------->
    <dialog id="plug_MenuWin" class="dis_none fix bg_gray_333 w_50 top_0 zindex_11 h_100 minus_left_50"> <!--左右展开菜单功能 （左侧：minus_left_50，右侧：minus_right_50）-->
        <nav class="module press">
            <h3 class="dis_block text_hidden ovh w_97 c_gray_ccc pl_3 line_h_38em">菜单展示</h3>
            <ul>
                <li class="bor_bottom bor_gray_222 active_gray_555" data-href="/page1">
                    <dl class="rel pl_3 ovh list_h_36em">
                        <dt class="fl ovh w_90 text_hidden">
                            <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
                            <span class="ml_05em c_white">菜单01</span>
                        </dt>
                        <dd class="abs wm_94 right_2 c_white text_al_r">
                            <i class="text_08em icon-ln_qianjin_b"></i>
                        </dd>
                    </dl>
                </li>
                <li class="bor_bottom bor_gray_222 active_gray_555" data-href="/page1">
                    <dl class="rel pl_3 ovh list_h_36em">
                        <dt class="fl ovh w_90 text_hidden">
                            <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
                            <span class="ml_05em c_white">菜单02</span>
                        </dt>
                        <dd class="abs wm_94 right_2 c_white text_al_r">
                            <i class="text_08em icon-ln_qianjin_b"></i>
                        </dd>
                    </dl>
                </li>
                <li class="bor_bottom bor_gray_222 active_gray_555" data-href="/page1">
                    <dl class="rel pl_3 ovh list_h_36em">
                        <dt class="fl ovh w_90 text_hidden">
                            <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
                            <span class="ml_05em c_white">菜单03</span>
                        </dt>
                        <dd class="abs wm_94 right_2 c_white text_al_r">
                            <i class="text_08em icon-ln_qianjin_b"></i>
                        </dd>
                    </dl>
                </li>
                <li class="bor_bottom bor_gray_222 active_gray_555" data-href="/page1">
                    <dl class="rel pl_3 ovh list_h_36em">
                        <dt class="fl ovh w_90 text_hidden">
                            <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
                            <span class="ml_05em c_white">菜单04</span>
                        </dt>
                        <dd class="abs wm_94 right_2 c_white text_al_r">
                            <i class="text_08em icon-ln_qianjin_b"></i>
                        </dd>
                    </dl>
                </li>
                <li class="bor_bottom bor_gray_222 active_gray_555" data-href="/page1">
                    <dl class="rel pl_3 ovh list_h_36em">
                        <dt class="fl ovh w_90 text_hidden">
                            <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
                            <span class="ml_05em c_white">菜单05</span>
                        </dt>
                        <dd class="abs wm_94 right_2 c_white text_al_r">
                            <i class="text_08em icon-ln_qianjin_b"></i>
                        </dd>
                    </dl>
                </li>
            </ul>
        </nav>
    </dialog>

    <ak-footer data-display="true">
    </ak-footer>
</template>

<script type="text/javascript">
    //引入Andrew插件的区域

    /*-----------------------------------------------Andrew_Lazyload 使用方法-------------------------------------------*/
    $(function() {
        $("img").Andrew_Lazyload({ //对所有的图片懒加载
            scroll: $("main"), //滚动区域的容器
            scrollTop: 100, //设置初始化滚动条位置（当滚动条滚动到当前设置的位置时所有效果将进行初始化）
            Img_Effect: "fadeIn", //图片加载动画效果
            Img_LoadStyle: "loading01", //图片加载之前显示的Loading效果 （loading01~05）注：Img_Effect，Img_LoadStyle，Img_Error 三个参数是图片懒加载专用参数；
            Img_Error: "./img/noimage.png", //图片加载失败时默认显示图片URL
            Callback: function(ele) { //初始化回调入口
                //console.log(ele);
            },
            Scrollback: function(ele,scroll) { //页面滚动后的回调
                //console.log(ele);
            }
        });
    });

    /*-----------------------------------------------Andrew_Popupwin (左侧方法)使用方法-------------------------------------------*/
    $(function(){
        setTimeout(function() { //为了兼容所有的jQuery版本header元素里面的任何绑定事件都需要延迟执行
            $("#plug_menu").unbind("click");
            $("#plug_menu").bind("click", function (e) {
                Andrew_Popupwin({
                    dom: "#plug_MenuWin", //弹窗内容的布局
                    maskPosition: "3", //Mask的z-index数值
                    closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                    OneButton: e.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                    toggleIcon: "text_14em icon-bt_quxiao_a", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                    callback:function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                        if (toggle) { //判断是否弹出弹窗
                            $(ele[0].dom).addClass("dis_block_im");
                            $("footer").addClass("zindex_2");
                            $("header, main, footer").animate({
                                "left": "50%"
                            },500);
                            $(ele[0].dom).animate({
                                "left": "0"
                            },500);
                        } else {
                            $("header, main, footer").animate({
                                "left": 0
                            },500);
                            $(ele[0].dom).animate({
                                "left": "-50%"
                            },500);
                            setTimeout(function() {
                                $("footer").removeClass("zindex_2");
                                $(ele[0].dom).removeClass("dis_block_im");
                            },500);
                        }
                    },
                    leaveback: function (ele,toggle) { //当路由页面离开时的回调(页面跳转后可以初始化设置)
                        $("header, main, footer").css({
                            "left": 0
                        });
                    }
                });
            });
        },100);
    });

    /*-----------------------------------------------Andrew_Popupwin (右侧方法)使用方法-------------------------------------------*/
    /*$(function(){
        setTimeout(function() { //为了兼容所有的jQuery版本header元素里面的任何绑定事件都需要延迟执行
            $("#plug_menu").bind("click", function (e) {
                Andrew_Popupwin({
                    dom: "#plug_MenuWin", //弹窗内容的布局
                    maskPosition:"3", //Mask的z-index数值
                    closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                    OneButton: e.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                    toggleIcon: "text_14em icon-bt_quxiao_a", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                    callback :function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                        if (toggle) { //判断是否弹出弹窗
                            $(ele[0].dom).addClass("dis_block_im");
                            $("main").addClass("left_au");
                            $("header, main, footer").animate({
                                "right": "50%"
                            },500);
                            $(ele[0].dom).animate({
                                "right": "0"
                            },500);
                        } else {
                            $("header, main, footer").animate({
                                "right": 0
                            },500);
                            $(ele[0].dom).animate({
                                "right": "-50%"
                            },500);
                            setTimeout(function() {
                                $(ele[0].dom).removeClass("dis_block_im");
                                $("main").removeClass("left_au");
                            },500);
                        }
                    }
                });
            });
        },100);
    });*/

    /*-----------------------------------------------Andrew_Waterfall 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_waterfall").Andrew_Waterfall({
            spacingWidth: 5, // 布局的元素水平间距设置
            spacingHeight: 5, // 布局的元素垂直间距设置
            minColCount: 2, // 最小一行显示几个？
            itemAlign: "center", // 布局排列方式 (center|left)
            isFadeIn: true, //是否开启浅入效果 （追加元素中的class必须有ak-fadeIn才有效果）
            ajaxCallback: function(ele, success, end) { //数据加载回调入口
                success();
                /*数据设置*/
                var data = {"data": [
                        { "src": "tibet-3.jpg" }, { "src": "tibet-2.jpg" }, { "src": "tibet-1.jpg" }, { "src": "tibet-5.jpg" }, { "src": "tibet-4.jpg" }, { "src": "tibet-6.jpg" }
                    ]};
                var str = "";
                var templ = '<figure class="ak-fadeIn"><img src="./img/{{src}}" /></figure>'

                for(var i = 0; i < data.data.length; i++) {
                    str += templ.replace("{{src}}", data.data[i].src);
                }
                /*元素设置*/
                var wdropload = "<div class=\"ak-waterfall-down dis_none\"><div class=\"ak-waterfall-load\"><span class=\"ak-waterfall-loading\"></span>加载中...</div></div>\n" +
                    "    <div class=\"ak-waterfall-down dis_none\"><div class=\"ak-waterfall-noData\">暂无数据</div></div>";
                if ($(".ak-waterfall-down").length < 3) {
                    ele.parent().append(wdropload);
                    ele.parent().css({
                        height: ele.outerHeight()
                    })
                }
                if (ele.children().length < 200) {
                    $(".ak-waterfall-down").eq(0).removeClass("dis_none");
                    $(".ak-waterfall-down").eq(1).addClass("dis_none");
                    $(str).appendTo(ele);
                } else {
                    $(".ak-waterfall-down").eq(0).addClass("dis_none");
                    $(".ak-waterfall-down").eq(1).removeClass("dis_none");
                }
                end();
            }
        });
    });

</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-header，ak-footer，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-header></ak-header>
    <div></div>
    <ak-footer></ak-footer>
</template>
<script>
</script>
<style>
</style>
-->